<template>
  <el-card class="box-card">
  <h2>审核未通过列表</h2>
  
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"stripe highlight-current-row border>  
    <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
    <!-- <el-table-column type="selection" width="55" fixed align="center"></el-table-column>  -->
      <!--显示图片-->
      <el-table-column label="封面图片" width="200" align="center">
          <template #default="scope">
            <el-image
            style="width: 100px; height: 100px;"
            :src="'http://localhost:8080/images/upload/'+scope.row.image" class="avatar" 
            />
          </template>
        </el-table-column>
          <el-table-column prop="user_name" label="发布者" width="150" align="center"></el-table-column>  
          <el-table-column prop="title" label="笔记标题" width="250" align="center"></el-table-column>
          <el-table-column prop="create_time" label="发布时间" width=" 200" align="center" :formatter="formatDate" ></el-table-column>
          <el-table-column prop="note_status" label="状态" width="150" align="center"></el-table-column>
          <el-table-column label="操作" width="220" align="center">
            <template #default="scope">
        <el-button type="primary" plain @click="openDetailDialog(scope.row.note_create_id)">详情</el-button>
      </template>
    </el-table-column>
   </el-table>
  
  
     <br/>
     <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 4, 5, 8]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
  </el-pagination>
     </el-card>
  
  <!--详情框-->
  <el-dialog v-model="dialogDetailVisible" title="笔记详情信息">
     <el-form :model="form">
       <el-form-item label="发布者" :label-width="formLabelWidth">
        <el-form-item :label="form.user_name"></el-form-item>
       </el-form-item>
       <el-form-item label="笔记标题" :label-width="formLabelWidth">
        <el-form-item :label="form.title"></el-form-item>
       </el-form-item>
  
       <el-form-item label="笔记内容" :label-width="formLabelWidth" class="text">
        <div class="text" v-html="form.note_content"></div>
       </el-form-item>
  
       <el-form-item label="发布时间" :label-width="formLabelWidth">
        <el-form-item :label="form.create_time" ></el-form-item>
       </el-form-item>
       <el-form-item label="笔记状态" :label-width="formLabelWidth">
        <el-form-item :label="form.note_status"></el-form-item>
       </el-form-item>
       <el-form-item label="封面图片" width="160" align="center":label-width="formLabelWidth">
          <template #default="scope">
            <el-image
            style="width: 100px; height: 100px;"
            :src="'http://localhost:8080/images/upload/'+form.image" class="avatar" 
            />
          </template>
        </el-form-item>
       
     </el-form>
     <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDetailDialog">取消</el-button>
        </span>
   
     </template>
  </el-dialog>
  </template>
   
  <script>
  import { ElMessage,ElMessageBox } from 'element-plus';
  export default{
    data() {
      return{  
        dialogDetailVisible:false,  //详情对话框
        dialogFormVisible:false,  //对话框是否显示      
        multipleSelection:[],     
        tableData: [], 
        queryDate: [],
        pageInfo:{},   //分页信息对象
        pageSize:5,   //当前页条数
        currentPage:1,  //当前页号
        totalNotes: 0,    // 总笔记数
        NoteCreateinfoData: [], // 存储所有评论数据
        form:{
  
  },              //对话框表单
     formLabelWidth:"140px",   //对话框label宽度
     title:"",                 //对话框标题
     btnName:"",                //对话框按钮文字
  }
  },
  
  
  
  
  
    methods:{
      formatDate(row, column, cellValue) {
      if (!cellValue) return "";
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // handleSelectionChange(val){     //多行选择
    //   this.multipleSelection = val
    //   console.log(this.multipleSelection);
    //  },
    closeDetailDialog(){
    this.dialogDetailVisible = false  //对话框是否显示
    console.log("closeDetailDialog()...");
   },
        //详情对话框
        openDetailDialog(note_create_id) {
        var _this = this;
        this.$http.get("/v1/NoteCreateinfo/"+note_create_id).then(response => {
          _this.form = response.data; // 将后端返回的数据赋值给 form 对象
          this.dialogDetailVisible = true; // 显示对话框
          
  
         // 格式化发布日期
         if (_this.form.create_time) {
              const date = new Date(_this.form.create_time);
              _this.form.create_time = date.toISOString().split('T')[0]; // 转换为 YYYY-MM-DD 格式
          }
        })
        this.dialogDetailVisible = true
      },

       //切换页号时得到当时页号
      handleCurrentChange(PageNum) {
      this.currentPage = PageNum;
      this.getPageData(this.currentPage, this.pageSize, '审核未通过');
    },

     
      //选择每一页显示的记录数
      handleSizeChange(PageSize) {
      this.pageSize = PageSize;
      this.currentPage = 1;  //改变页大小时重置为第一页
      this.getPageData(this.currentPage, this.pageSize, '审核未通过');
    },

      // 获取分页数据
      getPageData(num, size, note_status) {
      this.$http.get("/v1/NoteCreateinfo", {
        params: {  pageNum: num, pageSize: size, note_status } // 添加过滤参数
      }).then((response) => {
        this.pageInfo = response.data;
        this.tableData = this.pageInfo.list; // 过滤待审核的笔记
        this.totalNotes = this.pageInfo.total; // 更新总笔记数
        console.log(this.tableData);
      });
    }
  },

    
    
  
    
  mounted() {
  this.getPageData(this.currentPage, this.pageSize, '审核未通过');
}
  }
      
  
                         
  
     
  
  </script>
  
  <style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
  
  }
  .text {
  width: 700px; /* 使内容宽度充满父容器 */
  height: 100px; /* 设置一个固定的高度，根据需要调整 */
  overflow-y: auto; /* 当内容超出高度时启用垂直滚动条 */
  word-break: break-word; /* 允许长单词在达到容器边界时换行 */
  white-space: normal; /* 允许空白处换行 */
  line-height: 1.5; /* 根据字体大小调整行高，以控制每行字数 */
}
  </style>
